<template>
  <div class="luck-draw-wrapper">
    <c-title :hide="false" :text="'抽奖'"></c-title>
    <div class="content">
      <!-- <div class="record" @click="goAwardRecord">抽奖记录</div> -->
      <div class="red-bg">
        <img :src="redBg" />
      </div>
      <div class="img-title">
        <img :src="imgTitle" />
      </div>
      <!-- 抽奖 -->
      <div v-if="lotteryStatus != 'ended'" class="lucky-draw-platform">
        <!-- <div class="box1"> -->
          <div class="box2">
            <!-- 抽奖未开始显示人员列表&数据 -->
            <template v-if="lotteryStatus == 'notStart'">
              <van-row type="flex" justify="center" gutter="16">
                <van-col
                  span="8"
                  v-for="(item, index) in user"
                  :key="index"
                >
                  <div class="user-list">
                    <template v-if="item.id">
                      <div class="avatar"><img :src="item.avatar" /></div>
                      <div class="nike-name">{{ item.nickname }}</div>
                    </template>
                    <div class="no-user" v-else>
                      <img :src="questionMark" />
                    </div>
                  </div>
                </van-col>
              </van-row>
              <div class="datas">
                <div class="item">
                  <span class="label">积分场次：</span>
                  <span class="data">{{ mustIntegral }}</span>
                </div>
                <div class="item">
                  <span class="label">倒计时：</span>
                  <van-count-down :time="countDown" v-show="countDownShow" format="mm:ss" @finish="countDownFinish" />
                </div>
                <!-- <div class="item">
                  <span class="label">剩余次数：</span>
                  <span class="data">1</span>
                </div> -->
              </div>
            </template>
            <!-- 正在抽奖显示倒计时 -->
            <template v-if="lotteryStatus == 'underway'">
              <div class="count-down-img">
                <img :src="countDownImg" />
              </div>
              <div class="count-down-text">满5人自动抽奖哦</div>
            </template>
          </div>
        <!-- </div> -->
      </div>

      <!-- 规则 -->
      <div class="rules">
        <div class="title">抽奖规则</div>
        <div class="text" v-html="rulesText"></div>
      </div>

      <!-- 获奖名单 -->
      <div class="winners">
        <div class="title">获奖名单</div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="winners.length ? '没有更多了' : ''"
            @load="getWinnerList"
          >
            <template v-if="winners.length">
              <div v-for="(item, index) in winners" :key="index" class="list">
                <span>恭喜：{{ item.nickname }}</span>
                <span>中得{{ item.integral }}积分</span>
              </div>
            </template>
            <van-empty v-else description="暂无数据" />
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <van-popup v-model="prizeResultVisible" :close-on-click-overlay="false">
      <div class="close-icon">
        <!-- <img :src="popupCloseIcon"  /> -->
        <van-icon name="close" size="40px" color="#999" @click="pageGoBack" />
      </div>
      <div class="prize-result">
        <img :src="prizeResultBg" class="popup-bg" />
        <div class="result-text">
          <div class="title">
            <template v-if="isWinner">恭喜获得</template>
            <template v-else>谢谢参与</template>
          </div>
          <div class="sub-title" v-if="isWinner">{{ winnerIntegral }}可用积分</div>
        </div>
        <div class="confirm-button">
          <van-button round block color="linear-gradient(to bottom, #F6F3BE, #FFC770)" @click="viewAwardRecord">去查看</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import lucky_draw_controller from './lucky_draw_controller';
export default lucky_draw_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.luck-draw-wrapper {

  ::v-deep.van-nav-bar {
    background-color: #EA2414;

    .van-nav-bar__content {
      background: #EA2414;

      .van-nav-bar__title {
        color: #fff;
      }

      .van-button--default {
        background-color: #EA2414;
        
        .van-icon {
          color: #fff;
        }
      }
    }
  }

  ::v-deep.van-popup {
    background: none;
  }

  .content {
    padding: 16px;
    background: linear-gradient(to bottom, #EA2414, #FDAD6E, #FFBD78);
    position: relative;

    .record {
      color: #fff;
      text-align: right;
    }

    .red-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 0;

      img {
        width: 100%;
      }
    }

    .img-title {
      width: 70%;
      margin: 12px auto 0;
      text-align: center;
      position:relative;
      z-index: 99;

      img {
        width: 100%;
      }
    }

    .lucky-draw-platform {
      background-image: linear-gradient(to bottom, #FF5840, #FFAC64);
      border-radius: 24px;
      padding: 17px;
      margin-top: 25px;
      box-shadow: 0 4px 10px 0px rgba(121, 0, 0, .5);
      position:relative;
      z-index: 99;

      .box1 {
        background-image: linear-gradient(to bottom, #FF4C22, #FA422F);
        border-radius: 20px;
        padding: 15px;
        box-shadow: 0 -5px 5px 0px inset rgba(255, 170, 170, .5);
      }

      .box2 {
        background-image: linear-gradient(to bottom, #FF814C, #FE453D);
        border: 2px solid #FDCF63;
        border-radius: 18px;
        padding: 16px;
      }

      .user-list {
        background-color: #FEEDDD;
        border-radius: 8px;
        border: 1px solid #FFE1C0;
        margin-bottom: 16px;

        .avatar {
          width: 70%;
          margin: 12px auto 0;

          img {
            width: 100%;
            border-radius: 6px;
          }
        }

        .nike-name {
          width: 90%;
          margin: 0 auto;
          overflow: hidden;
          text-wrap: nowrap;
          text-overflow: ellipsis;
          font-size: 10px;
        }

        .no-user {
          margin: 12px;
          border: 1px dashed #999;
          border-radius: 6px;
          padding: 11px;
          
          img {
            border: 1px dotted #999;
            width: 100%;
          }
        }
      }
      
      .datas {
        margin-bottom: 18px;
        display: flex;
        justify-content: space-between;

        .item {
          display: flex;

          .label {
            color: #621D00;
            font-weight: bold;
          }

          .data {
            color: #ffffff;
          }

          ::v-deep.van-count-down {
            color: #ffffff;
          }
        }
      }

      .count-down-img {
        margin: 20px 0;
      }

      .count-down-text {
        margin-bottom: 20px;
      }
    }

    .rules {
      margin-top: 22px;
      color: #fff;

      .title {
        font-size: 16;
        font-weight: bold;
        margin-bottom: 12px;
      }

      .text {
        text-align: left;
        line-height: 200%;
        font-size: 12px;
      }
    }
    
    .winners {
      background-color: #fff;
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      margin-top: 24px;
      color: #B0481D;
      overflow: hidden;

      .title {
        font-size: 16px;
        font-weight: bold;
        margin: 24px 0;
      }

      .list {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        padding: 0 18px;

        &:nth-child(odd) {
          background-color: #FDFAF4;
        }
      }
    }
  }

  .prize-result {
    position: relative;

    .popup-bg {
      width: 100%;
    }

    .result-text {
      position: absolute;
      top: 22px;
      width: 100%;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 20px;

      .title {
        color: #B0481D;
      }

      .sub-title {
        color: #C85459;
      }
    }

    .confirm-button {
      position: absolute;
      bottom: 30px;
      width: 100%;
      padding: 0 20%;

      ::v-deep.van-button {
        color: #B0481D!important;
        font-size: 14px;
      }
    }
  }

  .close-icon {
    text-align: right;
    font-weight: bold;
  }
}
</style>
